<!--文章管理-->
<template>
    <div>
        <el-tabs type="border-card" v-model="activeName">
            <!--个人中心部分-->
            <el-tab-pane label="报名信息" name="second">
                <el-row :gutter="20">
                    <el-col :span="20">
                        <el-form :label-position="labelPosition" label-width="80px" :inline="true" ref="form" :model="pageAbout">
                            <el-form-item style="width:220px" prop="name">
                                <el-input placeholder="输入关键词搜索" style="width:200px" v-model="pageAbout.name"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="resetForm('form')">重置</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="found">查找</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="4">
                        <el-button @click="go">返回列表</el-button>
                     </el-col>
                </el-row>
                <div class="dateMsg" v-if="pageCount" style="color: red">总计<b>{{pageCount}}</b>条数据</div>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="name" label="姓名">
                    </el-table-column>
                    <el-table-column prop="phone" label="联系方式">
                    </el-table-column>
                    <el-table-column prop="join_time" label="报名时间" >
                    </el-table-column>
                    <el-table-column prop="remark" label="备注信息" >
                    </el-table-column>
                    <el-table-column prop="operator" label="最后操作人">
                    </el-table-column>
                    <el-table-column prop="date" label="管理">
                        <template scope="scope">
                            <el-button  type="text" size="small"  @click="addBz(scope.row.id,'addbzDialog',scope.row.remark)">添加备注</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination" style="width:200px;margin-top:10px;margin-left:75% ">
                    <el-pagination layout="prev, pager, next"  :total='pageCount' @current-change="getCurrentpage" :page-size=10></el-pagination>
                </div>
            </el-tab-pane>
        </el-tabs>
        <el-dialog title="添加备注" :visible.sync="dialog.addbzDialog.open" size="small" v-if="dialog.addbzDialog.open" :modal="false">
            <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="备注内容"
                    v-model="textarea">
            </el-input>
            <div style="margin:20px 20px">
                <el-button type="primary" @click="sureBtn">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import _http from '@/components/common/http.vue'
    import _param from '@/components/common/param.vue'
    export default {
        data() {
            return {
                bzid:'',
                textarea:'',
                userid:'',
                listLoading:false,
                currentPage:1,
                pageCount:0,
                pageAbout:{
                    name:'',
                    userid:'',
                    pageNumber:1,
                    pageSize:10,
                    activity_id:''
                },
                apiPort:{
///                    列表页内容接口
                    actList:"activitydetail/list",
//                    添加备注
                    bz:'activitydetail/addRemark'
////                    启用禁用
//                    statusC:'activity/enableOrDisable',
////                    删除接口
//                    del:'activity/deleteActivity'
                },
                dialog:{
                    addbzDialog:{
                        open:false
                    },
                },
                activeName: 'second',
                labelPosition: 'right',
                tableData: []
            };
        },
        mounted(){
            this.pageAbout.activity_id=this.$route.query.info
            this.limit = JSON.parse(localStorage.getItem("limitList"))
            this.userid=localStorage.getItem('userId')
            this.pageAbout.userid = localStorage.getItem('userId')
            this.getCurrentpage(1)
        },
        methods: {
            found(){
                this.pageAbout.pageNumber=1
                this.getCurrentpage(1)
            },
            resetForm(formName){
                this.$refs[formName].resetFields();
            },
            //        启用禁用
            forBidden(id,par){
                var that = this
                var param = {'id':id,status:par,userid:that.userid}
                var params = that.querystring.stringify(param)
                _http.axiosRequest(that,that.apiPort.statusC,params,(res)=>{
                    console.log(res.data)
                that.getCurrentpage(that.currentPage)
            })
            },
//            删除接口
            del(id){
                var that = this
                var param = {id:id,userid:that.userid}
                var params = that.querystring.stringify(param)
                _http.axiosRequest(that,that.apiPort.del,params,(res)=>{
                    console.log(res.data)
                that.getCurrentpage(that.currentPage)
            })
            },
            //跳转到指定页
            getCurrentpage(val){
                this.listLoading=true
                var that = this
                this.currentPage = val ? val:1
                this.pageAbout.pageNumber=val ? val:1
                var params = that.querystring.stringify(this.pageAbout)
                _http.axiosRequest(that,that.apiPort.actList,params,(res)=>{
                    console.log(res)
                    that.pageCount=res.data.data.total
                this.listLoading=false
                that.tableData = res.data.data.records
            })
            },
            banFormat:function(row,column){
                var ban = row[column.property];
                if ( ban == 1 ){
                    return "禁用";
                }
                return "启用";
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            openDialog(dialog){
                this.dialog[dialog].open = true
            },
            closeDialog(dialog){
                this.dialog[dialog].open = false
            },
            go(){
//                router.go({name: 'fabu', params: {userId: 1}});
                this.$router.go(-1)
            },
            addBz(id,par,mark){
                this.bzid = id
                this.openDialog(par)
                this.textarea=mark
            },
            sureBtn(){
                var that = this
                var params = that.querystring.stringify({remark:this.textarea,userid:this.userid,id:this.bzid})
                _http.axiosRequest(that,that.apiPort.bz,params,(res)=>{
                    console.log(res)
                that.closeDialog('addbzDialog')
                if(res.data.code==100){
                    that.textarea=''
                    that.getCurrentpage(that.currentPage)
                }else{
                    that.$message({
                        message:res.data.msg,
                        type: 'warning'
                    });
                }
            })
            }

        }
    };
</script>